<template>
  <div>
    <el-form label-width="130px" :model="formData">
      <el-form-item label="节点名称">
        <el-input v-model="formData.text"></el-input>
      </el-form-item>
      <el-form-item label="发起人员" v-if="nodeData.type==='start'">
        <el-select v-model="formData.actionRule" placeholder="请选择发起方式" clearable>
          <el-option v-for="item in actionRuleOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="接收人员" v-else>
        <el-select v-model="formData.actionRule" placeholder="请选择接收方式" clearable>
          <el-option v-for="item in actionRuleOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="指定角色" v-show="formData.actionRule===1">
        <el-cascader
            :options="roleList"
            :props="{ checkStrictly: true,emitPath: false, value: 'id', label: 'name',multiple: true }"
            placeholder="请选择角色"
            clearable
            class="w100"
            v-model="formData.roleIds"
        >
          <template #default="{ node, data }">
            <span>{{ data.name }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="指定部门" prop="deptId" v-show="formData.actionRule===2 ||formData.actionRule===3">
        <el-cascader
            :options="deptData"
            :props="{ checkStrictly: true,emitPath: false, value: 'deptId', label: 'deptName',multiple: true }"
            placeholder="请选择部门"
            clearable
            class="w100"
            v-model="formData.deptIds"
        >
          <template #default="{ node, data }">
            <span>{{ data.deptName }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="指定岗位" prop="postIds" v-show="formData.actionRule===5">
        <el-select v-model="formData.postIds" placeholder="请选择" clearable class="w100" multiple>
          <el-option
              v-for="post in postList"
              :key="'post-'+post.postId"
              :label="post.postName"
              :value="post.postId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="指定人员"  v-show="formData.actionRule===4">
        <div   v-if="selectedUser.length > 0">
          <el-tag  closable  :disable-transitions="false" class="u-m-r-10" v-for="(item,index) in selectedUser"  :key="index" @close="handleDeleteUser(item,index)" >{{item.userNickname}}</el-tag>
        </div>
        <el-button
            style="padding-left: 10px;"
            type="primary"
            link
            @click="handleSelectUser" >请选择人员</el-button>
      </el-form-item>
      <el-form-item label="多人审批处理规则"  >
        <el-select v-model="formData.approveRule" placeholder="请选择多人审批处理规则" style="width: 100%">
          <el-option v-for="item in approveRuleOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="网关审批处理规则" v-show="nodeData.type==='user'||nodeData.type==='push'||nodeData.type==='condition'">
        <el-select v-model="nodeData.type" placeholder="请选择多人审批处理规则" :disabled="true" style="width: 100%">
          <el-option v-for="item in conditionRuleOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发送通知" >
        <el-checkbox-group v-model="formData.notice">
          <el-checkbox label="sms" >短信</el-checkbox>
          <el-checkbox label="email" >邮件</el-checkbox>
          <el-checkbox label="innerNotice" >站内通知</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="允许退回" v-show="nodeData.type!=='start'">
        <el-radio-group v-model="formData.rollback">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
       <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
    <select-user ref="selectUserRef" @selectUser="confirmUser" :multiple="true"></select-user>
  </div>
</template>
<script>
import {ref} from "vue";
import {getDeptTree, getParams, getUserByIds, getUserSelector} from "/@/api/system/user";
import selectUser from "/@/components/selectUser/index.vue";

export default {
  name: 'CommonProperty',
  components: {selectUser},
  props: {
    nodeData: Object,
    lf: Object || String,
  },
  mounted() {
    const { properties, text } = this.$props.nodeData
    if (properties) {
      this.$data.formData = Object.assign({}, this.$data.formData, properties)
    }
    if (text && text.value) {
      this.$data.formData.text = text.value
    }
    if (text && text.value) {
      this.$data.text = text.value
    }
    this.getSelector()
    this.getSelectorUsers()
  },
  data () {
    return {
      text: '',
      roleList:[],//角色选项列表
      postList:[],//岗位选项列表
      deptData:[],//部门选项列表
      actionRuleOption:[
        {
          label:'所有人',
          value:0
        },
        {
          label:'指定角色',
          value:1
        },
        {
          label:'指定部门',
          value:2
        },
        {
          label:'指定部门负责人',
          value:3
        },
        {
          label:'指定人员',
          value:4
        },
        {
          label:'指定岗位',
          value:5
        },
        {
          label:'表单业务创建人',
          value:6
        },
        {
          label:'表单业务创建人所属部门',
          value:7
        },
        {
          label:'表单业务创建人所属部门负责人',
          value:8
        }
      ],
      approveRuleOption:[
        {
          label:'抢办模式（任何人第一个处理则通过）',
          value:1
        },
        {
          label:'顺序执行（所有人按顺序执行完才通过）',
          value:2
        },
        {
          label:'并行执行（所有人执行完才通过）',
          value:3
        },
      ],
      //分支条件审核规则
      conditionRuleOption:[
        {label:"并行网关-所有分支都必须完成审核",value:'user'},
        {label:"互斥网关-所有分支中只能有其中一条审核",value:'push'},
        {label:"条件网关-符合条件的某条分或多条支进行审核",value:'condition'},
      ],
      selectedUser:[],
      formData: {
          text: '',
          actionRule: '',
          roleIds:[],
          deptIds:[],
          userIds:[],
          postIds:[],
          approveRule:'',
          notice:[],
          rollback:0,
        }
    }
  },
  methods: {
    getSelector(){
      //获取角色岗位选项
      getParams().then((res)=>{
        const roles = res.data.roleList??[];
        const roleAccess = res.data.roleAccess??[];
        roles.map((item)=>{
          if(!roleAccess.includes(item.id)){
            item.disabled = true
          }
        })
        this.roleList = this.handleTree(roles??[], "id","pid","children",true);
        this.postList = res.data.posts??[];
      });
      getDeptTree().then((res)=>{
        this.deptData = res.data.deps
      })
    },
    handleSelectUser(){
      this.$refs.selectUserRef.openDialog()
    },
    confirmUser(data){
      let userArr = this.selectedUser
      data.map(function (item) {
        // 若存在某个用户 则不添加
        let has = userArr.some(function (user){
          return user.id === item.id;
        })
        if(!has){
          userArr.push(item)
        }
      });
      this.formData.userIds = userArr.map(item=>item.id)
      this.selectedUser = userArr;
    },
    handleDeleteUser(index){
      this.selectedUser.splice(index, 1);
      this.formData.userIds = this.selectedUser.map(item => item.id)
    },
    getSelectorUsers(){
      let ids = this.formData.userIds
      if(ids.length>0){
        getUserByIds({ids:ids}).then(res=>{
          if(res.code === 0){
            this.selectedUser = res.data.userList??[]
          }
        })
      }
    },
    onSubmit() {
      const { id } = this.$props.nodeData
      this.$props.lf.setProperties(id, {
        ...this.$data.formData
      });
      this.$props.lf.updateText(id, this.$data.formData.text);
      this.$emit('onClose')
    },
  }
}
</script>
<style scoped>
.u-m-r-10{
  margin-right: 8px;
}
</style>
